<!-- 学区查询 -->
<template>
	<zh-app style="font-family: '阿里巴巴普惠体'">
		<!-- 导航栏 -->
		<zh-navbar title="学区查询" color="#85a5ff" linear="right" :hideHome="true" />
		<!-- 提示语 -->
		<zh-sheet
			:round="5"
			parenClass="shadow"
			style="background-image: linear-gradient(to right, #ffffff, #d9d9d9)"
			:padding="[0, 20]"
		>
			<view class="flex-vertical">
				<zh-text style="padding-bottom: 20rpx" label="输入房产地址或户口地址以查询其所在学区"></zh-text>
				<zh-text color="#93A7B4" label="查询结果仅供参考"></zh-text>
			</view>
		</zh-sheet>
		<!-- 查询操作栏 -->
		<zh-card>
			<template #title>
				<view class="input">
					<zh-input
						prefix="tmicon-map"
						v-model="data.keywords"
						placeholder="请填写房产地址或户口地址关键词"
						style="background-color: #f0f0f0"
						:padding="[8, 8]"
						:fontSize="28"
					></zh-input>
				</view>
			</template>
			<template #content>
				<zh-button
					form-type="submit"
					label="查询"
					icon="tmicon-search"
					:fontSize="32"
					:height="70"
					:round="4"
					:margin="[0, 0]"
					style="background-image: linear-gradient(to right, #85a5ff, #2f54eb)"
					block
					@tap="query"
				></zh-button>
			</template>
		</zh-card>
		<!-- 查询结果栏 -->
		<zh-spin :load="data.loading" tip="信息加载中，请耐心等候">
			<zh-card
				:margin="[32, 32]"
				:padding="[20, 20]"
				style="background-image: linear-gradient(to right, #ffffff, #d9d9d9)"
				v-for="(item, index) in data.queryInfo"
				:key="index"
			>
				<template #title>
					<view class="title">{{ item.schoolName }}</view>
				</template>
				<template #status>
					<view class="flex-bothends">
						热度：<view class="hot" :style="{ backgroundColor: item.hotColor }"></view>
					</view>
				</template>
				<template #content>
					<view class="address">学校类型：{{ item.schoolCategoryName }}</view>
					<view class="title enroll">学生报名情况</view>
					<view class="enroll-item" v-for="(item2, index2) in item.stuRsTjList" :key="index2">
						<view class="item">招生年份：{{ item2.year }}</view>
						<view class="item">报名人数：{{ item2.sigNum }}</view>
						<view class="item">录取人数：{{ item2.admNum }}</view>
					</view>
				</template>
			</zh-card>
		</zh-spin>
	</zh-app>
</template>
<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'

	// ------------------接收传入参数(组件)-------------------

	// ------------------变量区------------------------------
	// 主数据
	const data = reactive({
		// 数据加载标记
		loading: false,
		keywords: '',
		// 查询结果
		queryInfo: [] as Array<any>,
	})

	// ------------------方法区------------------------------
	// 查询
	const query = () => {
		data.loading = true
		const params = {
			address: data.keywords,
		}
		$api.common.send.post('EduAnalysisXq0034', params).then((res: any) => {
			const result = res.result
			console.log('result = ', result)
			// for (const item of result) {
			// 	item.schoolCategoryName = '初中'
			// 	item.stuRsTjList = [
			// 		{
			// 			sigNum: '400',
			// 			admNum: '266',
			// 			plaNum: '666',
			// 			year: '2020',
			// 		},
			// 		{
			// 			sigNum: '266',
			// 			admNum: '266',
			// 			plaNum: '666',
			// 			year: '2022',
			// 		},
			// 	]
			// }
			for (const item of result) {
				if (item.stuRsTjList.length !== 0) {
					// 报名人数
					const enrollNum = Number(item.stuRsTjList[0].sigNum)
					// 计划人数
					const planNum = Number(item.stuRsTjList[0].plaNum)
					// 比率
					let rate = Math.round((enrollNum / planNum) * 100) / 100
					console.log('rate = ', rate)
					if (rate >= 1) {
						item.hotColor = '#DD001B'
					} else if (rate >= 0.9) {
						item.hotColor = '#D8B971'
					} else {
						item.hotColor = '#82C08E'
					}
				}
			}
			data.queryInfo = result
			data.loading = false
    }).catch((err: any) => { 
      data.loading = false
    })
	}

	// ------------------钩子函数----------------------------
	// 初始化
	onLoad((options: any) => {
		console.log('options = ', options)
	})
</script>
<style lang="scss" scoped>
	.input {
		width: 650rpx;
		margin-top: 10rpx;
	}
	.title {
		font-size: 34rpx;
		font-weight: 600;
	}
	.hot {
		width: 80rpx;
		height: 30rpx;
	}
	.enroll {
		margin: 40rpx 0;
	}
	.address {
		margin-left: 20rpx;
	}
	.enroll-item {
		margin: 40rpx 0 0;

		.item {
			margin: 14rpx 20rpx;
		}
	}
</style>
